<template>
    <div class="article_list">
        <header-cont :page="loginstatus=='unlogin'?'':'login'"></header-cont>
        <div class="section">
            <!--<div class="sec_left">
                <ul>
                    <li @click="handelChange(index, item.title)" :class="navInd==index?'active':''" v-for="(item, index) in leftNav" :key="index">
                        <span>{{item.title}}</span>
                        &lt;!&ndash; <img v-if="navInd==index" src="@/assets/img/right_active.png" alt=""> &ndash;&gt;
                    </li>
                </ul>
            </div>-->
            <div class="sec_right">
                <div class="newarea-right-title">
                    <b>{{rightTitle}}</b>
                    <p>
                        <a href="https://www.cec.org.cn/" target="_blank">
                            <a-icon type="home" />
                            <span>首页</span>
                        </a>
                        <i>-</i>
                        <span>{{rightTitle}}</span>
                    </p>
                </div>
                <ul v-if="navInd==0">
                    <li @click="viewDetail(item.id)" v-for="(item, index) in dataList" :key="index">
                        <p>{{item.tzggZbt}}</p>
                        <span>发布时间：{{item.createTime}}</span>
                    </li>
                </ul>
                <ul v-else-if="navInd==1">
                    <li @click="downloadZl(item.filePath, item.zlMc)" v-for="(item, index) in zlList" :key="index">
                        <p>{{item.zlMc}}</p>
                        <span>发布时间：{{item.createTime}}</span>
                    </li>
                </ul>
            </div>
            <div id="components-pagination-demo-mini" class="pagination">
                <a-pagination
                    :current="pageNo"
                    :page-size="pageSize"
                    :total="total"
                    @change="changeData"
                />
            </div>
        </div>
        <footer-cont></footer-cont>
    </div>
</template>

<script>
import headerCont from '@/views/declarationSystem/common/header-login';
import footerCont from '@/views/declarationSystem/common/footer';
import { 
    cxjsbPageList,
    sysCxjZlList,
    sysCxjZlDownload
} from '@/api/shenbao';
export default {
    data(){
        return {
            rightTitle: "通知公告",
            navInd: 0,
            leftNav: [{
                title:"通知公告",
                id: 0
            },{
                title:"资料中心",
                id: 1
            }],
            dataList: [],
            zlList: [],
            total: 0,
            loginstatus: '',
            pageNo: 1,
            pageSize:10
        }
    },
    components: {
        headerCont,
        footerCont
    },
    mounted() {
        this.navInd = this.$route.query.ind;
        if (this.navInd == 0) {
            this.rightTitle = "通知公告"
            this.getList();
        } else {
            this.rightTitle = "资料中心"
            this.getZlList();
        }
        console.log('asdfasdfasdfsadfsdf',this.navInd)
        var islogin = sessionStorage.getItem('islogin');
        if (islogin == '1') {
            this.loginstatus = 'login';
        } else {
            this.loginstatus = 'unlogin';
        };
    },
    methods: {
        handelChange(index, title){
            this.navInd = index;
            this.rightTitle = title;
        },
        changeData(current) {
            this.pageNo = current;
            if (this.navInd == 0) {
                this.getList();
            } else {
                this.getZlList();
            }
        },
        // 获取申报列表
        getList(){
            let data = {
                pageNo: this.pageNo,
                pageSize: this.pageSize
            }
            cxjsbPageList(data).then(res=>{
                if(res.data.success){
                    this.dataList = res.data.result.records;
                    this.total = res.data.result.total;
                }
            })
        },
        // 跳转详情
        viewDetail(id){
            this.$router.push({
                path: '/shenbao/innovationAwardNotice', 
                query: {
                    id
                } 
            })
        },
        // 获取资料中心列表
        getZlList(){
            let data = {
                pageNo: this.pageNo,
                pageSize: this.pageSize
            }
            sysCxjZlList(data).then(res=>{
                if(res.data.success){
                    this.zlList = res.data.result.records;
                    this.total = res.data.result.total;
                }
            })
        },
        downloadZl(url, zlMc){
            let that = this;
			let fileGs = url.split('.');
            sysCxjZlDownload(url).then(res=>{
               that.downfn(zlMc,res,fileGs[1]);
            })
        },
        downfn(title, res, fileGs) {
            const data = res.data;
            const url = window.URL.createObjectURL(new Blob([data], {type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"}))
            const link = document.createElement('a')
            link.style.display = 'none'
            link.href = url;
            link.setAttribute('download', title+'.'+fileGs)
            document.body.appendChild(link)
            link.click()
            document.body.removeChild(link)
        },
      alterTzgg(){
        location.reload();
        this.$router.push('/shenbao/articleList?ind=0');

      },
      alterZlzx(){
        location.reload();
        this.$router.push('/shenbao/articleList?ind=1');

      },
    },
}
</script>

<style lang='less'>
.pagination {
    position: absolute;
    left: 0;
    bottom: 0;
    text-align: center;
    margin-top: 40px;
    width: 100%;
    .ant-pagination-item-active {
        background: #3388EE;
        a {
            color: #FFFFFF;
            font-size: 16px;
        }
    }
    ul {
        li {
            width: 40px!important;
            height: 30px!important;
            text-align: center!important;
            line-height: 30px!important;
            border-radius: 2px;
            // border: 1px solid rgba(164, 168, 180, 0.2)!important;
            margin-right: 0px!important;
            // &:last-child {
            //     width: auto!important;
            //     height: auto!important;
            //     border: 0!important;
            // }
            .ant-pagination-options-quick-jumper {
                vertical-align: middle!important;
            }
        }
    }
  .ant-pagination-total-text {
    width: 90px!important;
    border:0px!important;
  }
  .ant-pagination-prev{
    // width: 80px!important;
  }
  .ant-pagination-next{
    // width: 80px!important;
    // border: 1px solid #e2e2e2!important;
  }
  .ant-pagination.mini .ant-pagination-prev, .ant-pagination.mini .ant-pagination-next {
    width: 80px!important;
    border: 1px solid #e2e2e2!important;
  }
}
</style>
<style lang="less" scoped>
.article_list {
    width: 100%;
    background: #F7F7F7;
}
.section {
    position: relative;
    width: 1200px;
    height: 690px;
    margin: 2px auto 0;
    display: flex;
    // padding-top: 20px;
    background: #fff;
    margin-top:30px;
    .sec_left {
        width: 250px;
        height: 100%;
        // background: #FAFAFB;
    }
    .sec_right {
        position: relative;
        flex: 1;
        height: 100%;
        background: #FFFFFF;
        overflow: hidden;
        overflow-y: scroll;
    }
}
.sec_left {
    display: flex;
    justify-content: center;
    // padding-top: 90px;
    margin-top: 20px;
    ul {
        // margin-top: 20px;
        width: 100%;
        li {
            width: 100%;
            height: 50px;
            line-height: 50px;
            cursor: pointer;
            text-align: center;
            // border: 2px solid transparent;
            span {
                font-size: 16px;
                color: rgb(84,84,84);
                line-height: 50px;
            }
        }
        
        li:hover {
            background: #f0faff;
        }

        li.active {
            width: 100%;
            position: relative;
            border-radius: 2px;
            // border: 2px solid #ECEBEB;
            background: #e4f2fa;
            box-sizing: border-box;
            span {
                color: #2d8cf0;
                color: #3388EE;
            }
            img {
               position: absolute;
               right: 20px;
               top: 50%;
               width: 8px;
               height: 13px;
               margin-top: -6.5px;
               display: block;
            }
        }
        li.active::before {
            content: "";
            position: absolute;
            left: 0;
            top: 0;
            width: 20px;
            height: 20px;
            border-left: 2px solid #2d8cf0;
            border-top: 2px solid #2d8cf0;
        }
        li.active::after {
            content: "";
            position: absolute;
            right: 0;
            bottom: 0;
            width: 20px;
            height: 20px;
            border-bottom: 2px solid #2d8cf0;
            border-right: 2px solid #2d8cf0;
        }
    }
}

.sec_right {
    // position: relative;
    padding: 0 18px 30px 33px;
    .newarea-right-title {
        width: 100%;
        height: 50px;
        line-height: 50px;
        letter-spacing: 1px;
        border-bottom: 2px solid #2d8cf0;
        margin: 20px 0;
        display: flex;
        justify-content: space-between;
        b {
            font-weight: normal;
            font-size: 21px;
            font-weight: bold;
            color: #333;
        }
        p {
            height: 50px;
            display: flex;
            align-items: center;
            a {
                &:hover {
                    span {
                        color: #2d8cf0;
                        font-size: 14px;
                    }
                    i {
                        color: #2d8cf0;
                    }
                }
                span {
                    color: #999;
                    font-size: 14px;
                    margin-right: 5px;
                }
                i {
                    color: #999;
                }
            }
            &>i {
                font-style: normal;
                margin: 0 10px;
                color: #999;
            }
            &>span {
                color: #666;
                font-size: 14px;
            }
        }
    }
    ul {
        width: 100%;
        li {
            position: relative;
            display: flex;
            flex-direction: column;
            width: 895px;
            box-sizing: border-box;
            // height: 71px;
            width: 100%;
            overflow: hidden;
            padding: 10px 20px;
            position: relative;
            margin-bottom: 5px;
            cursor: pointer;
            p {
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                height: 30px;
                font-size: 16px;
                color: #333;
                line-height: 30px;
                margin-bottom: 0;
                font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
            }
            span {
                height: 30px;
                font-size: 12px;
                color: #999;
                line-height: 30px;
                font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
            }
            &:hover {
                p {
                    color: #2d8cf0;
                }
            }
            &:hover::before {
                border-left:2px solid #2d8cf0;
                border-top:2px solid #2d8cf0;
                
            }
            &:hover::after {
                border-bottom:2px solid #2d8cf0;
                border-right:2px solid #2d8cf0;
                
            }
            
            &::before {
                content: "";
                position: absolute;
                left: 0;
                top: 0;
                width: 20px;
                height: 20px;
                border-left: 2px solid #c8ddf3;
                border-top: 2px solid #c8ddf3;
            }
            &::after {
                content: "";
                position: absolute;
                right: 0;
                bottom: 0;
                width: 20px;
                height: 20px;
                border-bottom: 2px solid #c8ddf3;
                border-right: 2px solid #c8ddf3;
            }
        }
    }
}

</style>
